<template>
	<view class="home">
		<view class="content">
			<view @click="godetail(item._id)" class="item" v-for="item in listarr" :key="item._id">
				<view class="text">
					<view class="title">{{item.title}}</view>
						<view class="info">
							<text>{{item.author}}</text>
							<!-- <text>{{item.posttime}}</text>	 -->
							<uni-dateformat 
							:date="item.posttime" 
							format="yy-MM-dd" 
							:threshold="[60000, 3600000]"
							></uni-dateformat>
							<uni-icons type="locked" size="18" color="#888"></uni-icons>
							<text>仅自己可见</text>
						</view>
					</view>
				<view class="pic" >
					<image :src="item.img[0]" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="goedit" @click="goadd">
			<uni-icons type="plusempty" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listarr:[]
			}
		},
		onLoad() {
			this.getdate();
		},
		onReachBottom(){
			this.getdate()
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log("下拉刷新");
			this.listarr=[]
			this.getdate()
		},
		methods: {
			//跳转详情
			godetail(e){
				console.log(e);
				uni.navigateTo({
					url:"/pages/art_detail/art_detail?id="+e
				})
			},
			//刷新
			getdate(){
				uniCloud.callFunction({
					name:"art_get_all",
					data:{
							skip:this.listarr.length
						}
				}).then(res=>{
					console.log(res);
					let oldlist=this.listarr;
					let nslist=[...oldlist,...res.result.data]
					this.listarr=nslist
					uni.stopPullDownRefresh()
				})
			},
				//点击跳转
				goadd(){
					uni.navigateTo({
						url: '/pages/art-add/art-add'
					});
				}
		}
	}
</script>

<style lang="scss" scoped>
.home {
	.content{
		padding: 30rpx;
		.item{
			//横向
			display: flex;
			//两端对齐
			justify-content: space-between;
			//间距
			padding: 20rpx;
			margin: 15rpx;
			// padding: 20rpx 0;
			// border-bottom: 1rpx solid #eee;
			border: 1rpx solid #efefef;
			border-radius: 8rpx;
			box-shadow:0 0 50rpx rgb(33, 43, 73,0.1);
			.text{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
						font-size: 37rpx;
						color: #333;
						word-break: break-all;
					  text-overflow: ellipsis;
					  display: -webkit-box;
					  -webkit-box-orient: vertical;
					  -webkit-line-clamp: 2; /* 超出几行省略 */
					  overflow: hidden;

				}
				.info{
					font-size: 25rpx;
					color: #888;
					text{
						padding-right: 20rpx;
					}
				}
			}
			.pic{
				width: 150rpx;
				height: 150rpx;
				
				image{
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}
		}
	}

	.goedit{
		color: #efefef;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(255,255,255);
		border-radius: 50%;
		font-size: 50rpx;
		position: fixed;
		right: 60rpx;
		bottom: 180rpx;
		box-shadow: 0 0 20rpx rgba(33, 43, 73,0.7);
	}
}

	
	
</style>
